<template>
  <div>
      <div class="hearder-search">
        <div class="breadcrumb-container">
          <div class="search_box">
            <el-input v-model="searWord.name" placeholder="姓名" size="small"
                      class="w-140"></el-input>
            <el-select placeholder="健康码是否绿码" v-model="searWord.is_green" size="small" class="w-140">
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in isHealth"
                         :key="index"></el-option>
            </el-select>
            <el-select placeholder="健康码是否绿码（共同居住人）" v-model="searWord.is_other_green" size="small" class="w-200">
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in isHealthOther"
                         :key="index"></el-option>
            </el-select>
            <el-select placeholder="体温是否超过37" v-model="searWord.is_temperature" size="small" class="w-140">
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in temperatureList"
                         :key="index"></el-option>
            </el-select>
            <el-select v-model="statusLine" placeholder="接种疫苗" size="small"
                       class="w-140 mr-10">
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in statusList"
                         :key="index"></el-option>
            </el-select>
          </div>
          <el-button type="primary" @click="searchBtn" size="small"><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
        </div>
        <div class="breadcrumb-container">
          <download :type="ranking" :option="searWord"></download>
          <el-button size="small" @click="gotohistory">健康申报历史记录</el-button>
          <span class="allbook">总 {{ page.total }} 条数据</span>
          <span class="allbook" @click="checkUserHealth">学生人数：<i>{{studentNumber}}</i>，今日申报人数：<i>{{ page.total }}</i>，<em>未申报人数：<i>{{studentNumber-page.total}}</i></em></span>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableoption.tableStripe"
              :border="tableoption.tableBorder"
              tooltip-effect="dark"
              style="width: 100%"
              header-cell-class-name="table-text-c"
              cell-class-name="table-text-c">
            <el-table-column
                prop="name"
                label="姓名">
              <template slot-scope="scope">
                {{ scope.row.student.name }}
              </template>
            </el-table-column>
            <el-table-column
                label="班级">
              <template slot-scope="scope">
                {{ scope.row.classes?scope.row.classes.class_name:'' }}
              </template>
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="申报日期"
                width="160">
            </el-table-column>
            <el-table-column
                prop="description"
                label="是否健康">
              <template slot-scope="scope">
                <span :style="{'color':scope.row.is_health!==1?'red':''}">{{ scope.row.is_health==1?'是':'否' }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="description"
                label="是否绿码"
                width="80">
              <template slot-scope="scope">
                <span :style="{'color':scope.row.is_health!==1?'red':''}">{{ scope.row.is_health==1?'是':'否' }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="description"
                label="共同居住人是否绿码">
              <template slot-scope="scope">
                <span :style="{'color':scope.row.is_other_green!==1?'red':''}">{{ scope.row.is_other_green==1?'是':'否' }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="description"
                label="14天内出省">
              <template slot-scope="scope">
                <span>{{ scope.row.student_is_local==1?'是':'否' }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="temperature"
                label="体温（°C）">
              <template slot-scope="scope">
                <span :style="{'color':Number(scope.row.temperature)>37.3?'red':''}">{{ scope.row.temperature }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="classes"
                label="共同居住人14天外地入厦">
              <template slot-scope="scope">
                <span>{{ scope.row.is_in==1?'是':'否' }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="classes"
                label="是否在厦"
                width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.is_local==1?'是':'否' }}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="是否接种疫苗">
              <template slot-scope="scope">
                <span>{{ scope.row.is_vaccines==1?'是':'否' }}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="140">
              <template slot-scope="scope">
                <el-button size="small" @click="addActive(scope.row.id)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
      <!--    历史申报记录 type 0 学生 1 职工 备注1-->
      <historyList :visible.sync="historyvisible" type="0"></historyList>
      <!--    未申报人数 type 1 学生 2 职工-->
      <notSubmit :visible.sync="healthstudentvisible" type="1"></notSubmit>
      <!--    type 1 学生 2 职工-->
      <healthEdit :visible.sync="healthdetailvisible" :healthId="healthId" type="1"></healthEdit>
  </div>
</template>

<script>
import {pagination, tableoption,yearDay} from '@/utils/util.js'
import download from '@/components/common/download'
import historyList from "./popup/historyList";
import notSubmit from "./popup/notSubmit";
import healthEdit from "./popup/healthEdit";

export default {
  components: {
    download,
    historyList,
    notSubmit,
    healthEdit
  },
  data() {
    return {
      activeName: 'first',
      tableoption: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [], // 数据列表
      // 搜索
      searWord: {
        name: '',
        is_green:'', // 是否绿吗
        is_other_green:'',
        is_temperature:'',
        start_time:'',
        end_time:'',
        type:0,
        is_vaccines: '' // 1 是 0 否
      },
      value1: '',
      pickerOptions1: {
        disabledDate (time) {
          return time.getTime() > Date.now()+ 8.64e7
        }
      },
      // 是否健康
      isHealth:[
        {
          id:1,
          name:'是'
        },
        {
          id:0,
          name:'否'
        }
      ],
      isHealthOther:[
        {
          id:1,
          name:'是'
        },
        {
          id:0,
          name:'否'
        }
      ],
      temperatureList:[
        {
          id:1,
          name:'是'
        },
        {
          id:0,
          name:'否'
        }
      ],
      ranking: 'morningList',
      downloadOption: {
        name:'',
        is_green:'', // 是否绿吗
        is_other_green:'',
        is_temperature:'',
        start_time:'',
        end_time:'',
        type:0
      },
      healthstudentvisible:false,
      studentNumber: 0,
      historyvisible: false, // 历史记录
      healthdetailvisible: false,
      healthId: 0,
      statusLine: 0,
      statusList: [{name: '全部', id: 0}, {name: '是', id: 1}, {name: '否', id: 2}], // 已读状态
    }
  },
  created() {
    // 获取今天时间
    console.log(yearDay(new Date()))
    this.searWord.start_time = yearDay(new Date());
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      let option = JSON.parse(JSON.stringify(this.searWord))
      option.p = this.page.pageindex
      option.is_vaccines = this.statusLine === 0 ? '' : (this.statusLine === 1 ? 1 : 0)
      this.$post(this.api.manage.health.index, option).then((response) => {
        if (response.code === 0) {
          for(let i in response.list.data){
            response.list.data[i].create_time = yearDay(response.list.data[i].create_time)
          }
          this.arryList = response.list.data
          this.page.total = response.list.total
          this.studentNumber = response.student
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    // 搜索
    searchBtn() {
      this.page.pageindex = 1
      if(this.value1){
        this.searWord.start_time = this.value1[0]
        this.searWord.end_time = this.value1[1]
      }else{
        this.searWord.start_time = ''
        this.searWord.end_time = ''
      }
      this.searWord.start_time = yearDay(new Date());
      this.InitFn()
    },
    addActive(id) {
      this.healthId = id;
      this.healthdetailvisible = true;
      // this.$router.push('/healthEdit?id=' + id)
    },
    gotohistory(){
      this.historyvisible = true
      // this.$router.push('/historyindex?type=' + 0)
    },
    // 刷新页面
    refreshFn() {
      this.page.pageindex = 1
      this.searWord.name = ''
      this.searWord.is_green = ''
      this.searWord.is_other_green = ''
      this.searWord.is_temperature = ''
      this.searWord.start_time = ''
      this.searWord.end_time = ''
      this.value1 = ''
      this.searWord.start_time = yearDay(new Date());
      this.InitFn()
    },
    // 查看未申报人
    checkUserHealth(){
      this.healthstudentvisible = true
    }
  },
  mounted() {
  },
  // 缓存机制 end
}
</script>
<style scoped>
.allbook i{
  font-style: normal;
  color:red;
}
.allbook em{
  font-style: normal;
}
.allbook em:hover{
  text-decoration: underline;
  cursor: pointer;
}
</style>
